<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>props的基本使用</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <!-- 对组件标签属性进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">  /*此处一定要写babel*/
        //创建组件
        class Person extends React.Component {
            constructor(props){
                //构造器是否接受props 是否传递super 取决于是否希望在构造器中通过this访问props 大部分情况下constructor可以不写
                // console.log(props);
                super(props)
                console.log("constructor",this.props)
            }

            //定义规则propTypes 小写的
            static propTypes = {
                //PropTypes是引入的prop-types.js提供的
                name: PropTypes.string.isRequired,//限制name必穿 且为字符串
                sex: PropTypes.string,//性别为字符串
                age: PropTypes.number,//年龄必须是数字
            }
            //指定默认标签属性值
            static defaultProps = {
                sex: '男',//性别默认是男
                age: 18  //年龄默认是18
            }

            render() {
                // console.log(this)
                const { name, age, sex } = this.props;
                // this.props.name='jack'   报错 因为props是只读的

                // props是只读的
                return (
                    <ul>
                        <li>姓名:{name}</li>
                        <li>性别:{sex}</li>
                        <li>年龄:{age + 1}</li>
                    </ul>
                )
            }
        }


        //渲染组件到页面
        ReactDOM.render(<Person name="tom" />, document.getElementById('test'));



    </script>
</body>

</html>